<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar :title='title' left-icon-color="white" :autoBack="true" :titleStyle="{'color':'white'}" bgColor="#13989a"
			:placeholder="true"></u-navbar>
		<view class="container" style="padding-bottom: 100rpx;">
			<view class="time" v-if="current==4" style="text-align: center;">
				{{timeTitle}}
			</view>
			<view class="shopName" @click="shopNameShow=true" v-if="assignName">
				{{assignName}}
			</view>
			<u-subsection activeColor="#13989A" :list="list1" :current="current1"  @change="sectionChange1"></u-subsection>
			<view v-if="storePatrolRecordVo.length" style="margin-top: 20rpx;">
				<view class="floor1" @click="toPath(item.patrolRecordId)"  v-for="(item,index) in storePatrolRecordVo" :key="index">
					<view class="appraisalRecords flex" style="padding: 20rpx;color: #545454;font-size: 24rpx;align-items: center;background-color: #fafafa;height: 50rpx;">
						<u-icon name="camera-fill" color="#13989a" size="24"></u-icon>
						<text>{{typeFn(item.patrolType)}} </text>
						<text style="margin: 0 10rpx;">|</text>
						<text> 巡查人：{{item.userName}}</text>
						<text style="margin: 0 10rpx;">|</text>
						<text> 得分： {{`${item.patrolScore}.0/${item.fullScore}.0`}}</text>
					</view>
					<view class="title flex" style="padding: 20rpx;justify-content: space-between;">
						<view >
							{{item.templateName}}
						</view>
						<!-- <view style="width: 100rpx;height: 24rpx;">
							<u-tag :text="item.isComplete==1?'待整改':'已完成'" size="mini"></u-tag>
						</view> -->
					</view>
					<view class="flex" style="padding: 0 20rpx;justify-content: space-between;color: #545454;font-size: 24rpx;">
						<view class="flex" style="flex-direction:column;margin-bottom: 20rpx;">
							<text style="margin-bottom: 20rpx;">{{item.assignName}}</text>
							<text style="margin-bottom: 20rpx;">{{item.completeTime}}</text>
							<text v-if="item.storeStaffName">{{`店员:${item.storeStaffName} | ${item.storeStaffPhone}`}}</text>
						</view>
						<view class="flex" style="flex-direction:column;margin-bottom: 20rpx;">
							<text style="font-weight: 700;color: black;margin-bottom: 20rpx;">{{item.scoreRate}}%</text>
							<text>得分率</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view style="width: 100%;height: 50vh;padding-top: 100rpx;" >
					<u-empty
					        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
							width="100%"
							height="100%"
							text="数据为空"
					>
					</u-empty>
				</view>
			</view>
		</view>
		<view style="position: fixed;bottom: 0;left: 0;right: 0;z-index: 999;margin-bottom: 30rpx;">
			<u-subsection activeColor="#13989a" :list="list" :current="current"  @change="sectionChange"></u-subsection>
		</view>
		<u-datetime-picker ref="datetimePicker" cancelText=' ' :show="calendarShow2" v-model="time2" mode="date"
			@confirm="chooseTime2" @cancel="timeCancel" @close="timeClose"></u-datetime-picker>
		<u-datetime-picker :show="pickTimeShow" v-model="time1"  :formatter="formatter" mode="date" closeOnClickOverlay
			@confirm="timeConfirm" @cancel="timeCancel2" @close="timeClose2"></u-datetime-picker>
		<!-- <u-calendar :show="pickTimeShow" mode="range" @confirm="timeConfirm" @close="timeClose"></u-calendar> -->
		<u-popup :show="calendarDialog" @close="calendarDialogClose" mode="top">
			<view style="height: 400rpx;">
				<view class="timeConner">
					<view @click="pickTimeShow=true">{{time1?$u.timeFormat(time1, 'yyyy.mm.dd'):'开始时间'}}</view>
					<view>至</view>
					<view @click="calendarClick">{{time2?$u.timeFormat(time2, 'yyyy.mm.dd'):'结束时间'}}</view>
				</view>
				<view class="bottom flex" style="display: flex;justify-content: space-between; align-items: ;">
					<u-button size="small" style="width: 140rpx;" @click="calendarDialogClose">取消</u-button>
					<u-button size="small" type="primary" style="width: 140rpx;" color="#0da2a2"
						@click="change">确认</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="shopNameShow" @close="shopNameShow=false" round="10" mode="bottom">
			<view class="overdueForm" style="padding-top: 20rpx;height: 80vh;overflow-y: auto;">
				<view style="text-align: center;font-size: 30rpx;margin-bottom: 50rpx;">
					选择门店
				</view>
				<view class="workerSearch" style="">
					<image style="width: 34rpx;height: 34rpx;"
						src="https://renovationcdn.jiachuangnet.com/index/workerIndex/search.png"></image>
					<u-input placeholder="请输入门店名称搜索" style="height: 78rpx;" v-model="keyword" @change='blurSearch'></u-input>
				</view>
				<view class="floor" v-for="(v,i) in patrolStoreVoList"  style="padding: 20rpx; margin:20rpx; background-color: #f2f2f2;">
					<view class="title"   :key="i" @click="handerclick(v)" >
						{{v.assignName}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					list1:['考评记录','点检记录'],
	                list:  ['本周', '上周','本月','上月','自定义'],
					current: 0,
					current1:0,
					storePatrolRecordVo:[],
					templateName:'',
					assignTaskId:0,
					calendarShow2:false,
					time2:null,
					pickTimeShow:false,
					time1:null,
					calendarDialog:false,
					shopNameShow:false,
					keyword:'',
					assignName:'',
					patrolStoreVoList:[]
				}
			},
			onShow() { 
				this.getStorePatrolRecordVo()
				this.getPatrolStoreVo()
			},
			onLoad(option) {
				if(option.assignTaskId){
					this.assignTaskId=option.assignTaskId
				}
				if(option.assignName){
					this.assignName=option.assignName
				}
			},
			computed:{
				title(){
					return '巡查记录·'+this.list[this.current]
				},
				timeTitle(){
					let str=this.time1 ? this.$u.timeFormat(this.time1, 'yyyy-mm-dd'):''
					let str2=this.time2 ? this.$u.timeFormat(this.time2, 'yyyy-mm-dd'):''
					return str+' ~ '+str2
				}
			},
			methods:{
				handerclick(v){
					console.log(v)
					this.assignTaskId=v.assignTaskId
					this.assignName=v.assignName
					this.getStorePatrolRecordVo()
					this.shopNameShow=false
				},
				getPatrolStoreVo(){
					uni.$u.http.post('/patrol/getPatrolStoreVo', {
						pageNumber:1,
						pageSize:1000,
						storeName:this.keyword
					}).then(res=>{
						this.patrolStoreVoList=res.data
					})
				},
				blurSearch() {
					this.getPatrolStoreVo()
				},
				// 1 在线巡查 2 线下巡查 3 在线点检 4 线下点检
				typeFn(index){
					const arr=[
						'在线巡查',
						'线下巡查',
						'在线点检',
						'线下点检'
					]
					return arr[index-1]
				},
				getStorePatrolRecordVo(){
					uni.$u.http.post('/patrol/getStorePatrolRecordVo', {
						pageNumber:1,
						pageSize:1000,
						flag:this.current+1,//1 本周 2 上周 3 本月 4 上月 5 自定义
						assignTaskId:this.assignTaskId,
						type: this.current1+1,//1 考评 2 点检
						startTime:this.time1 ? this.$u.timeFormat(this.time1, 'yyyy-mm-dd'):null,
						endTime:this.time2 ? this.$u.timeFormat(this.time2, 'yyyy-mm-dd'):null
					}).then(res=>{
						if(res){
							this.storePatrolRecordVo=res.data
						}
					})
				},
				sectionChange(e){
					this.current=e
					if(e==4){
						this.calendarDialog=true
					}else{
						this.time1=null
						this.time2=null
						this.getStorePatrolRecordVo()
					}
				},
				sectionChange1(e){
					this.current1=e
					this.getStorePatrolRecordVo()
				},
				toPathC(templateId){
					uni.navigateTo({
						url: `/packageC/pages/oLineAssessment/assessment?templateId=${templateId}&assignTaskId=${this.assignTaskId}`
					})
				},
				toPath(patrolRecordId){
					uni.navigateTo({
						url: `/packageC/pages/oLineAssessment/assessmentDetali?patrolRecordId=${patrolRecordId}`
					})
				},
				change() {
					if (!this.time1) {
						return uni.$u.toast('请选择开始时间!');
					}
					if (!this.time2) {
						return uni.$u.toast('请选择结束时间!');
					}
					this.calendarDialog = false
					this.getStorePatrolRecordVo()
				},
				timeConfirm(e) {
					this.pickTimeShow = false;
					this.time1 = e.value
				},
				chooseTime2(e) {
					this.calendarShow2 = false;
					this.time2 = e.value
				},
				calendarClick() {
					if (this.time1) {
						this.calendarShow2 = true
					} else {
						uni.$u.toast('请选择开始时间!');
					}
				},
				timeCancel() {
					this.time1 = null
					this.pickTimeShow = false;
				},
				calendarDialogClose() {
					this.calendarDialog = false
				},
				timeClose() {
					this.pickTimeShow = false;
				},
				timeCancel2() {
					this.time2 = null
					this.calendarShow2 = false;
				},
				timeClose2() {
					this.calendarShow2 = false;
				},
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`
					}
					if (type === 'month') {
						return `${value}月`
					}
					if (type === 'day') {
						return `${value}日`
					}
					return value
				},
			}
		}
</script>

<style lang="scss" scoped>
	.shopName{
		text-align: center;
		font-weight: 700;
		font-size: 30rpx;
		line-height: 60rpx;
	}
	.timeConner {
		display: flex;
		background: #0da2a2;
		height: 80rpx;
		border-radius: 50rpx;
		margin-left: 50rpx;
		margin-top: 150rpx;
		margin-right: 50rpx;
		justify-content: space-evenly;
		color: #fff;
		align-items: center;
		border: 10rpx solid #15a29d;
	}
	.bottom {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		padding-left: 120rpx;
		padding-right: 120rpx;
	}
	.container {
		width: 92vw;
		padding: 30rpx;
		z-index: 10;
		position: absolute;
		top: 172rpx; 
		overflow: hidden;
		border-radius: 20rpx;
	}
	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 100%rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		opacity: 0.9;
		margin: 10rpx 0;
	}
	.floor{
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title{
			font-weight: 600;
			font-size: 30rpx;
		}
	}
	.floor1{
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		.title{
			font-weight: 600;
			font-size: 30rpx;
		}
	}
</style>